<template>
	<view class="page flex-col" :class="{ 'no-padding': !isRegister }">
		<!-- <u-navbar title="招聘会" bgColor="transparent" :titleStyle="{'color':'#000', 'fontWeight': 600}">
			<view class="flex navigeter" slot="left">
				<view class="nav-left flex">
					<u-icon name="arrow-left" size="24" @tap="back"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
					<u-icon name="home" size="24" @tap="toHome"></u-icon>
				</view>
			</view>
		</u-navbar> -->
		<view class="friends-container" v-if="isRegister">
			<view class="box_44 flex-col">
				<view class="group_39 flex-col">
				</view>
			</view>
			<view class="box_45 flex-col">
				<view class="box_46 flex-row justify-between">
					<view v-for="(tab, index) in tabs" :key="index"
						:class="['tab-item', currentTab === index ? 'active-tab' : '']" @click="handleTabClick(index)">
						<view :class="['flex-col', index === 0 ? 'box_5' : 'box_6']"></view>
						<view class="flex-row justify-between text-wrapper_4">
							<text class="text_7">{{ tab.name }}</text>
						</view>
					</view>
					<view class="image-text_38 flex-row justify-between" @click="handleFilter">
						<image class="thumbnail_48" referrerpolicy="no-referrer"
							src="https://hxs.dsjhs.com:553/prod-api/profile/guolv.png" />
						<text class="text-group_3">筛选</text>
					</view>
				</view>
				<view class="list_6 flex-col">
					<!-- 找搭子 -->
					<view v-if="currentTab === 0">
						<view v-if="userList.length > 0">
							<view class="list-items_6 flex-col" v-for="(item, index) in userList" :key="index"
								@click="handleToDetail(item)">
								<view class="group_42 flex-row">
									<image v-if="item.userAvatar" class="image_29" referrerpolicy="no-referrer"
										:src="api_host + item.userAvatar" />
									<view class="flex-row justify-between">
										<view class="box_47 flex-col">
											<view class="section_17 flex-row">
												<text class="text_83">{{ item.nickName }}</text>
												<image v-if="item.sex === '女'" class="thumbnail_49"
													referrerpolicy="no-referrer"
													src="https://hxs.dsjhs.com:553/prod-api/profile/nv.png" />
												<image v-if="item.sex === '男'" class="thumbnail_50"
													referrerpolicy="no-referrer"
													src="https://hxs.dsjhs.com:553/prod-api/profile/nan.png" />
											</view>
											<view class="flex-row content-wrapper">
												<text class="text_84" v-if="item.year">{{ item.year }}岁·</text>
												<text class="text_84">{{ item.height || 0 }}cm</text>
												<text v-if="item.weight" class="text_84">·{{ item.weight || 0
												}}kg</text>
												<text v-if="item.edu" class="text_84">·{{ item.edu || '' }}</text>
											</view>
										</view>
										<view class="text-wrapper_45 flex-col" @click.stop="handleChat(item)">
											<text class="text_85">打招呼</text>
										</view>
									</view>
								</view>
								<view class="group_43 flex-row">
									<view v-if="item.idCert === 2" class="flex-row">
										<image class="thumbnail_51" referrerpolicy="no-referrer"
											src="https://hxs.dsjhs.com:553/prod-api/profile/sm.png" />
										<text class="text_86">实名</text>
									</view>
									<view v-if="item.idCert === 3" class="flex-row">
										<image class="thumbnail_52" referrerpolicy="no-referrer"
											src="https://hxs.dsjhs.com:553/prod-api/profile/gz-s.png" />
										<text class="text_87">工作</text>
									</view>

								</view>
								<view class="group_44 flex-row">
									<view class="text-wrapper_46 flex-col" v-for="tag in item.tagObj" :key="tag.id">
										<text class="text_88">{{ tag.tagName }}</text>
									</view>
								</view>
							</view>
						</view>
						<view v-else>
							<view class="no-data">
								<text>暂无好友</text>
							</view>
						</view>
						<!-- 性格测试 -->
						<view class="test-container" @click="handleTest"></view>
					</view>
					<!-- 找活动 -->
					<view v-if="currentTab === 1">
						<view class="list-items_6 flex-col" v-for="(item, index) in activityList" :key="index"
							@click="openUrl('/subpage/meethuangshi/activityDetail?id=' + item.id)">
							<view class="block_21 flex-col">
								<view class="block_22 flex-row justify-between">
									<view class="image-text_154 flex-row">
										<view class="section_33 flex-row">
											<image class="thumbnail_106" v-if="item.isOrganize == 1"
												:src="'https://hxs.dsjhs.com:553/prod-api/profile/yujian/tag_3.png'"
												mode=""></image>
											<image class="thumbnail_106" v-else
												:src="'https://hxs.dsjhs.com:553/prod-api/profile/yujian/tag_1.png'"
												mode=""></image>
										</view>
										<text class="text-group_105">{{ item.name }}</text>
									</view>
									<!--  0-未开始 1-进行中 2-已结束 3-手动隐藏 -->
									<view class="text-wrapper_113 flex-col"
										:class="item.actStatus === 0 ? 'weikaishi' : item.actStatus === 1 ? 'jinxingzhong' : item.actStatus === 2 ? 'jieshu' : 'weikaishi'">
									</view>
								</view>
								<view class="block_23 flex-row" v-if="item.tag">
									<view class="text-wrapper_114 flex-col" v-for="ele in item.tag.split(',')"
										:key="ele">
										<text class="text_225">{{ ele }}</text>
									</view>
								</view>
								<!-- <view class="block_24 flex-row">
									<view class="image-text_157 flex-row">
										<image class="thumbnail_107" referrerpolicy="no-referrer"
											src="https://hxs.dsjhs.com:553/prod-api/profile/faburen.png" />
										<view class="text-group_106 flex-col">
											<text class="text_228">
												{{ item.startDate + '~' + item.endDate }}
											</text>
											<text class="text_229">{{ item.distance || 0 }}&nbsp;{{ item.address
												}}</text>
											<text class="text_230">{{ item.promoter || '' }}</text>
										</view>
									</view>
									<view class="image-text_158 flex-row">
										<image class="thumbnail_108" referrerpolicy="no-referrer"
											src="https://hxs.dsjhs.com:553/prod-api/profile/hd-riqi.png" />
									</view>
									<view class="image-text_159 flex-row">
										<image class="thumbnail_109" referrerpolicy="no-referrer"
											src="https://hxs.dsjhs.com:553/prod-api/profile/hd-wz.png" />
									</view>
									<view class="image-text_159 flex-row">
										<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/user.png" mode=""
											style="width: 32rpx;height: 32rpx;">
									</view>
								</view> -->
								<view class="flex mb20 mt20">
									<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/sj.png" mode=""
										style="width: 32rpx;height: 32rpx;"></image>
									<text class="c999 f26 ml10">{{item.startDate}} - {{item.endDate}}</text>
								</view>
								<view class="flex mb20">
									<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/dz.png" mode=""
										style="width: 32rpx;height: 32rpx;"></image>
									<text class="c999 f26 ml10">{{item.distance}} {{item.address}}</text>
								</view>
								<view class="flex">
									<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/user.png" mode=""
										style="width: 32rpx;height: 32rpx;">
									</image>
									<text class="c999 f26 ml10">{{item.promoter}}</text>
								</view>
								<view class="block_25 flex-col"></view>
								<view class="block_26 flex-row justify-between">
									<view class="flex-row">
										<image class="image_46" referrerpolicy="no-referrer"
											src="https://hxs.dsjhs.com:553/prod-api/profile/sm-l.png" />
										<text class="text_231">{{ item.registrationCount || 0 }}人已报名</text>
									</view>
									<view class="text-wrapper_117 flex-col">
										<text class="text_232">活动报名</text>
									</view>
								</view>
								<text class="text_233">报名截止时间: {{ item.applicationDeadline }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="tabbar">
				<view class="bgFff tabbar-box flex-jus">
					<view class="flex1 textC pore" v-for="(item, index) in tabbarList" :key="index"
						@click="tabbarClick(index, item)">
						<view class="flex-au">
							<view v-if="item.center" class="center-img">
								<image :src="'../../static/tabbar/' + item.icon + '.png'" mode=""
									style="width: 104rpx;height: 104rpx;"></image>
							</view>
							<view v-else>
								<image
									:src="'../../static/tabbar/' + (tabIndex == index ? item.select : item.icon) + '.png'"
									mode="" style="width: 52rpx;height: 52rpx;"></image>
							</view>
						</view>
						<u-gap height="5"></u-gap>
						<view class="f24 c343 bold">{{ item.title }}</view>
						<view class="msg_count" v-if="item.is_msg && item.msg > 0">{{ item.msg }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 服务协议 -->
		<view class="guide-container" v-else>
			<service-agreement></service-agreement>
		</view>

		<!-- 新手引导 -->
		<u-overlay v-if="isFirst" :show="showOverlay" @click="closeGuide" :opacity="0.8">
			<view class="overlay-warp">
				<view class="btn" @click="closeGuide">知道了</view>
				<view class="guide-img">
					<img class="guide-img-item" src="https://hxs.dsjhs.com:553/prod-api/profile/guide-img.png" alt=""
						srcset="">
					<img class="pulish-img" src="https://hxs.dsjhs.com:553/prod-api/profile/fabu.png" alt="" srcset="">
				</view>
			</view>
		</u-overlay>
		<!-- 搭子筛选 -->
		<filter-person v-if="showFilter" @updateList="updateList"></filter-person>
		<!-- 活动筛选 -->
		<filter-activity v-if="showActivityFilter" @updateList="updateList"></filter-activity>
		<!-- 实名认证 -->
		<realname-modal :show="showRealnameModal" @close="showRealnameModal = false"
			@confirm="handleConfirm"></realname-modal>
	</view>
</template>
<script>
import serviceAgreement from './realnameauth/serviceAgreement.vue'
import {
	checkRegister,
	recommendUserList,
	actListUser
} from '@/common/api_meethuangshi.js'
import filterPerson from './filterPerson.vue'
import realnameModal from './realnameModal.vue'
import filterActivity from './filterActivity.vue'
export default {
	components: {
		serviceAgreement,
		filterPerson,
		realnameModal,
		filterActivity
	},
	computed: {
		// 直接将 currentUserInfo 改为计算属性，从 store 获取
		currentUserInfo() {
			return this.$store.getters.currentUserInfo || {}
		}
	},
	data() {
		return {
			showOverlay: false, // 修改默认值，通过逻辑控制显示
			isRegister: true,
			isFirst: false, // 默认不是第一次，通过检查本地存储来判断
			currentTab: 0,
			tabIndex: 0,
			tabs: [{
				name: '找搭子'
			},
			{
				name: '找活动'
			}
			],
			userList: [],
			activityList: [],
			constants: {},
			tabbarList: [{
				title: '首页',
				icon: 'icon1',
				select: 'icon1-s',
				path: '/subpage/meethuangshi/index'
			},
			{
				title: '社群',
				icon: 'icon6',
				select: 'icon6-s',
				path: '/subpage/meethuangshi/forum',
			},
			{
				title: '',
				icon: 'icon3',
				center: true,
				path: '/pages/release/index?from=yujian',
			},
			{
				title: '消息',
				icon: 'icon4',
				select: 'icon4-s',
				path: '/subpage/meethuangshi/myMessage',
				is_msg: true,
				msg: 0
			},
			{
				title: '个人中心',
				icon: 'icon5',
				path: '/subpage/meethuangshi/myCenter',
				select: 'icon5-s'
			},
			],
			showFilter: false,
			showActivityFilter: false,
			showRealnameModal: false,
			latitude: null,
			longitude: null,
		};
	},
	onShow() {
		// 每次页面显示时重置tabIndex为首页索引，确保高亮正确显示
		this.tabIndex = 0;
	},
	onLoad(options) {
		// 从本地存储恢复 currentUserInfo 到 store
		try {
			const storedUserInfo = uni.getStorageSync('currentUserInfo')
			if (storedUserInfo) {
				this.$store.commit('setCurrentUserInfo', storedUserInfo)
			}
		} catch (e) {
			console.log('恢复用户信息失败:', e)
		}

		if (options.showSkip) {
			this.checkFirstVisit() // 检查是否第一次访问
		}
		this.checkRegister()

	},
	methods: {

		async checkRegister() {
			const userId = await this.getUserId()
			if (!userId) {
				console.log('用户信息获取失败或用户未登录')
				return
			}

			console.log(this.userInfo, 'userInfo')
			const res = await checkRegister({
				userId: userId
			})
			if (res.code == 200) {
				// 直接存储到 store 中，计算属性会自动更新
				this.$store.commit('setCurrentUserInfo', res.data)
				this.isRegister = res.data != null
				if (this.isRegister) {
					this.getRecommendUserList()
				}

				const listData = await recommendUserList({
					userId: userId,
				})
				if (res.code == 200) {
					this.userList = listData.data
				}
			}
		},
		// 搭子列表
		async getRecommendUserList() {
			const userId = await this.getUserId()
			if (!userId) {
				console.log('用户信息获取失败或用户未登录')
				return
			}

			const res = await recommendUserList({
				userId: userId,
			})
			if (res.code == 200) {
				this.userList = res.data
			}
			console.log(res, 'res')
		},
		// 活动列表
		async getActList() {
			const userId = await this.getUserId()
			if (!userId) {
				console.log('用户信息获取失败或用户未登录')
				return
			}
			const res = await actListUser({
				userId: userId,
			})

			if (res.code == 200) {
				this.activityList = res.rows
				this.activityList.forEach(item => {
					item.distance = this.$utils.getDistance(this.latitude, this.longitude, item.location.split(',')[0], item.location.split(',')[1]);
				})
				console.log(this.activityList, 'this.activityList')
			}
		},
		tabbarClick(index, item) {
			// 如果是当前页面就返回，避免重复跳转
			if (this.tabIndex === index) {
				return
			}
			
			// if (item.title === '社群') {
			// 	uni.showToast({
			// 		title: '开发中，敬请期待',
			// 		icon: 'none'
			// 	})
			// 	return
			// }
			
			uni.navigateTo({
				url: item.path
			})
			this.tabIndex = index
		},
		// handleChat(item) {
		// 	if (this.currentUserInfo.idCert === 2) {
		// 		uni.navigateTo({
		// 			url: item.path
		// 		})
		// 		this.tabIndex = index
		// 	}
		// },
		handleChat(item) {
			if (this.currentUserInfo.idCert === 2) {
				uni.navigateTo({
					url: `/subpage/meethuangshi/chat?id=${item.userId}&nickName=${item.nickName}&userAvatar=${item.userAvatar}`
				});
			} else {
				this.showRealnameModal = true
			}
		},
		handleToDetail(item) {
			uni.navigateTo({
				url: `/subpage/meethuangshi/personalHomepage?id=${item.userId}&currentId=${this.currentUserInfo.userId}`
			});
		},
		handleFilter() {
			if (this.currentTab === 0) {
				this.showFilter = true
			} else {
				this.showActivityFilter = true
			}
		},
		handleTabClick(index) {
			console.log(index, 'indexxx')
			this.currentTab = index;
			if (index === 0) {
				this.getRecommendUserList()
			} else {
				this.getLocation()
			}
		},
		updateList() {
			console.log(this.currentTab, 'this.currentTab')
			if (this.currentTab === 0) {
				this.showFilter = false
				this.getRecommendUserList()
			} else {
				this.showActivityFilter = false
				this.getLocation()
			}
		},
		handleTest() {
			uni.navigateTo({
				url: '/subpage/caractere/index'
			});
		},
		// 检查是否第一次访问
		checkFirstVisit() {
			try {
				const hasVisited = uni.getStorageSync('meethuangshi_has_visited')
				if (!hasVisited) {
					// 第一次访问，显示新手引导
					this.isFirst = true
					this.showOverlay = true
				}
			} catch (e) {
				console.log('检查访问记录失败:', e)
			}
		},
		handleConfirm() {
			this.showRealnameModal = false
			uni.navigateTo({
				url: `/subpage/meethuangshi/acceptAuth?isUpdate=true`
			});
		},
		// 关闭新手引导
		closeGuide() {
			this.showOverlay = false
			this.isFirst = false
			// 设置已访问标记
			try {
				uni.setStorageSync('meethuangshi_has_visited', true)
			} catch (e) {
				console.log('设置访问记录失败:', e)
			}
		},
		getLocation() {
			const that = this;
			uni.getLocation({
				type: 'wgs84',
				success: function (res) {
					const {
						latitude,
						longitude
					} = res;
					that.latitude = latitude;
					that.longitude = longitude;
					that.getActList()
				},
				fail() {
					that.getActList()
				}
			});
		},
	},
};
</script>
<style lang="scss" scoped>
@import '../../static/style/common.css';

.overlay-warp {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	bottom: 62px;
	left: 50%;
	transform: translateX(-50%);

	.btn {
		width: 82px;
		height: 32px;
		background: linear-gradient(173deg, #FFA5F5 0%, #319EFF 100%);
		border-radius: 20px;
		font-weight: 500;
		font-size: 13px;
		color: #FFFFFF;
		line-height: 18px;
		text-align: center;
		font-style: normal;
		line-height: 30px;
	}

	.guide-img {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.guide-img-item {

		width: 230px;
		height: 164px;

	}

	.pulish-img {
		width: 52px;
		height: 52px;
	}
}

.page {
	background-color: rgba(247, 246, 255, 1);
	position: relative;
	width: 100%;
	min-height: 100vh;
	// padding-bottom: 120px;

	&.no-padding {
		padding-bottom: 0;
	}

	// overflow: hidden;

	.box_44 {
		background: url(https://hxs.dsjhs.com:553/prod-api/profile/yjhs-index.png) 100% no-repeat;
		background-size: 100% 100%;
		padding: 18px 16px 22px;

		.group_37 {
			margin: 0 27px 0 43px;

			.text_77 {
				overflow-wrap: break-word;
				color: rgba(0, 0, 0, 1);
				font-size: 17px;
				font-family: SFPro-Semibold;
				font-weight: 600;
				text-align: right;
				white-space: nowrap;
				line-height: 22px;
			}

			.thumbnail_46 {
				width: 19px;
				height: 12px;
				margin: 5px 0 5px 182px;
			}

			.thumbnail_47 {
				width: 17px;
				height: 12px;
				margin: 5px 0 5px 8px;
			}

			.image_26 {
				width: 27px;
				height: 13px;
				margin: 5px 0 4px 7px;
			}
		}

		.group_38 {
			margin-top: 6px;

			.label_26 {
				width: 42px;
				height: 46px;
			}

			.text_78 {
				height: 24px;
				overflow-wrap: break-word;
				color: rgba(0, 0, 0, 1);
				font-size: 17px;
				font-family: SFProDisplay-Medium;
				font-weight: 500;
				text-align: right;
				white-space: nowrap;
				line-height: 20px;
				margin: 11px 0 0 120px;
			}

			.image_27 {
				width: 87px;
				height: 32px;
				margin: 7px 0 7px 67px;
			}
		}

		.group_39 {
			width: 100%;
			height: 400rpx;
			padding-top: 20px;
			position: relative;
			background: url('https://hxs.dsjhs.com:553/prod-api/profile/yujian/meet-banner.png') no-repeat center;
			background-size: 100% 100%;
			box-sizing: border-box;

			// .block_7 {
			// 	box-shadow: 0px 5px 8px 0px rgba(123, 67, 194, 0.05);

			// 	.block_8 {
			// 		background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/d93030c3a00f41cd8b87fb63d5abb288_mergeImage.png);
			// 		border-radius: 20px;

			// 		.group_40 {
			// 			background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/07a8bd642e1f4d77b763ffd216a4dd7f_mergeImage.png);
			// 			border-radius: 20px;

			// 			.group_41 {
			// 				background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/ecca6d94df6748dba97371f6ad059247_mergeImage.png);
			// 				width: 391px;
			// 				height: 150px;
			// 				margin: 96px -17px -66px -16px;
			// 			}
			// 		}
			// 	}
			// }

			.block_9 {
				border-radius: 20px;
				background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/1e08a0440e794a089431df422a5278bd_mergeImage.png);
				height: 200px;
				width: 358px;
				position: absolute;
				left: 0;
				top: 0;
				padding: 32px 126px 10px 14px;

				.section_15 {
					width: 218px;

					.text-wrapper_42 {
						background-color: rgba(255, 222, 109, 1);
						border-radius: 8px;
						padding: 5px 6px 5px 7px;

						.text_79 {
							background-image: linear-gradient(180deg,
									rgba(34, 22, 51, 1) 0,
									rgba(215, 158, 255, 1) 100%);
							overflow-wrap: break-word;
							color: rgba(52, 49, 79, 1);
							font-size: 14px;
							letter-spacing: -0.9333333373069763px;
							font-family: DingTalk-JinBuTi;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 16px;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}

					.label_27 {
						width: 23px;
						height: 23px;
						margin-bottom: 3px;
					}
				}

				.text-wrapper_43 {
					width: 122px;
					margin: 16px 91px 0 5px;

					.text_80 {
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 14px;
						letter-spacing: -0.9333333373069763px;
						font-family: DingTalk-JinBuTi;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 16px;
						margin-top: 14px;
					}

					.text_81 {
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 26px;
						letter-spacing: -1.7333333492279053px;
						font-family: DingTalk-JinBuTi;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 31px;
					}
				}

				.section_16 {
					margin: 0 99px 0 7px;

					.image-text_36 {
						width: 112px;

						.image_28 {
							width: 32px;
							height: 7px;
							margin: 12px 0 12px 0;
						}

						.text-group_12 {
							overflow-wrap: break-word;
							color: rgba(52, 49, 79, 1);
							font-size: 26px;
							letter-spacing: -1.7333333492279053px;
							font-family: DingTalk-JinBuTi;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 31px;
						}
					}
				}

				.image-wrapper_11 {
					margin: 2px 94px 0 101px;

					.label_28 {
						width: 23px;
						height: 23px;
					}
				}

				.text-wrapper_44 {
					margin: 13px 124px 0 5px;

					.text_82 {
						overflow-wrap: break-word;
						color: rgba(114, 155, 255, 1);
						font-size: 11px;
						letter-spacing: 3.6666667461395264px;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 16px;
					}
				}
			}
		}
	}

	.box_45 {
		padding: 2px 16px 0 16px;

		.box_46 {
			margin-left: 6px;

			.box_5 {
				width: 40px;
				height: 40px;
				background: url('https://hxs.dsjhs.com:553/prod-api/profile/dazi.png') no-repeat center;
				background-size: 100% 100%;
			}

			.box_6 {

				width: 40px;
				height: 40px;
				background: url('https://hxs.dsjhs.com:553/prod-api/profile/hd.png') no-repeat center;
				background-size: 100% 100%;
			}
		}

		.text-wrapper_4 {

			margin: 11px 0 9px 0;

			.text_7 {
				height: 21px;
				overflow-wrap: break-word;
				color: rgba(52, 49, 79, 0.3);
				font-size: 18px;
				font-family: DingTalk-JinBuTi;
				font-weight: normal;
				text-align: left;
				white-space: nowrap;
				line-height: 21px;
				margin: -1px 6px 0 2px;
			}
		}

		.image-text_37 {
			width: 96px;
			margin-left: 27px;

			.group_5 {
				background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/d90d4f9c783c40e7bac441d7124ac592_mergeImage.png);
				width: 40px;
				height: 40px;
			}

			.text-group_2 {
				overflow-wrap: break-word;
				color: rgba(52, 49, 79, 1);
				font-size: 18px;
				font-family: DingTalk-JinBuTi;
				font-weight: normal;
				text-align: left;
				white-space: nowrap;
				line-height: 21px;
				margin-top: 10px;
			}
		}

		.image-text_38 {
			width: 48px;
			margin: 9px 0 11px 0;

			.thumbnail_48 {
				width: 16px;
				height: 16px;
				margin: 2px 0 2px 0;
			}

			.text-group_3 {
				overflow-wrap: break-word;
				color: rgba(52, 49, 79, 1);
				font-size: 14px;
				font-weight: normal;
				text-align: right;
				white-space: nowrap;
				line-height: 20px;
			}
		}
	}

	.list_6 {
		margin-top: 11px;
		padding-bottom: 100px;

		.list-items_6 {
			position: relative;
			background-color: rgba(255, 255, 255, 1);
			border-radius: 40px 20px 20px 20px;
			margin-bottom: 12px;
			width: 100%;
			padding: 12px 12px 16px 12px;

			.group_42 {
				width: 100%;
				height: 56px;

				.image_29 {
					flex: 0 0 56px;
					width: 56px;
					height: 56px;
					border-radius: 50%;
				}

				.box_47 {
					// width: 149px;
					height: 46px;
					margin: 6px 0 4px 16px;

					.section_17 {
						// width: 118px;
						height: 22px;
						margin-right: 31px;

						.text_83 {
							overflow-wrap: break-word;
							color: rgba(52, 49, 79, 1);
							font-size: 16px;
							font-family: PingFangSC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 22px;
						}

						.thumbnail_49 {
							width: 16px;
							height: 16px;
							margin: 3px 0 3px 6px;
						}

						.thumbnail_50 {
							width: 16px;
							height: 16px;
							margin: 3px 0 3px 6px;
						}
					}

					.text_84 {
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 14px;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 20px;
						margin-top: 4px;
					}
				}

				.content-wrapper {
					position: relative;
				}

				.text-wrapper_45 {
					position: absolute;
					right: 12px;
					top: 12px;
					height: 30px;
					background: linear-gradient(173deg, #FFA5F5 0%, #319EFF 100%);
					border-radius: 20px;
					// background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPnga76f2902d918c43ded8aad231248cdffaefa5425c0aada023889d070bccbba57) 100% no-repeat;
					// background-size: 100% 100%;
					padding: 6px 8px 6px 8px;

					.text_85 {
						overflow-wrap: break-word;
						color: rgba(255, 255, 255, 1);
						font-size: 13px;
						font-family: PingFangSC-Medium;
						font-weight: 500;
						text-align: left;
						white-space: nowrap;
						line-height: 18px;
					}
				}
			}

			.block_21 {
				background-color: rgba(255, 255, 255, 1);
				border-radius: 20px;
				width: 358px;
				align-self: center;
				margin-top: -1px;
				padding: 0 0 12px 16px;

				.block_22 {
					width: 342px;

					.image-text_154 {
						width: 282px;
						margin-top: 14px;

						.section_33 {
							position: relative;

							.thumbnail_106 {
								width: 50px;
								height: 20px;
							}

							.image-text_156 {
								position: absolute;
								left: 2px;
								top: 2px;
								width: 43px;
								height: 16px;

								.thumbnail_106 {
									width: 16px;
									height: 16px;
								}

								.text-group_104 {
									overflow-wrap: break-word;
									color: rgba(108, 96, 213, 1);
									font-size: 12px;
									font-family: PingFangSC-Medium;
									font-weight: 500;
									text-align: left;
									white-space: nowrap;
									line-height: 16px;
								}
							}
						}

						.text-group_105 {
							margin-left: 8px;
							overflow-wrap: break-word;
							color: rgba(52, 49, 79, 1);
							font-size: 16px;
							font-family: PingFangSC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 22px;
						}
					}

					.text-wrapper_113 {
						position: absolute;
						top: 0;
						right: 0;
						width: 58px;
						height: 28px;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						background-position: center;
						

						&.jinxingzhong {
							background-image: url('https://hxs.dsjhs.com:553/prod-api/profile/yujian/hd_1.png');
						}

						&.jieshu {
							background-image: url('https://hxs.dsjhs.com:553/prod-api/profile/yujian/hd_2.png');
						}

						&.weikaishi {
							background-image: url('https://hxs.dsjhs.com:553/prod-api/profile/yujian/hd_1.png');
						}

						.text_224 {
							overflow-wrap: break-word;
							color: rgba(255, 255, 255, 1);
							font-size: 12px;
							font-family: PingFangSC-Medium;
							font-weight: 500;
							text-align: right;
							white-space: nowrap;
							line-height: 17px;
						}
					}
				}

				.block_23 {
					gap: 6px;
					margin: 8px 177px 0 0;

					.text-wrapper_114 {
						background-color: rgba(52, 49, 79, 0.06);
						border-radius: 14px;
						padding: 2px 8px 2px 8px;

						.text_225 {
							overflow-wrap: break-word;
							color: rgba(52, 49, 79, 1);
							font-size: 12px;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 16px;
						}
					}

					.text-wrapper_115 {
						background-color: rgba(52, 49, 79, 0.06);
						border-radius: 14px;
						padding: 2px 8px 2px 8px;

						.text_226 {
							overflow-wrap: break-word;
							color: rgba(52, 49, 79, 1);
							font-size: 12px;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 16px;
						}
					}

					.text-wrapper_116 {
						background-color: rgba(52, 49, 79, 0.06);
						border-radius: 14px;
						padding: 2px 8px 2px 8px;

						.text_227 {
							overflow-wrap: break-word;
							color: rgba(52, 49, 79, 1);
							font-size: 12px;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 16px;
						}
					}
				}

				.block_24 {
					position: relative;
					margin: 12px 105px 0 0;

					.image-text_157 {
						width: 237px;

						.thumbnail_107 {
							width: 16px;
							height: 16px;
							margin-top: 44px;
						}

						.text-group_106 {
							.text_228 {
								padding-left: 20px;
								overflow-wrap: break-word;
								color: rgba(52, 49, 79, 1);
								font-size: 12px;
								font-weight: normal;
								text-align: left;
								white-space: nowrap;
								line-height: 16px;
							}

							.text_229 {
								padding-left: 20px;
								overflow-wrap: break-word;
								color: rgba(52, 49, 79, 1);
								font-size: 12px;
								font-weight: normal;
								text-align: left;
								white-space: nowrap;
								line-height: 16px;
								margin: 6px 68px 0 0;
							}

							.text_230 {
								padding-left: 8px;
								overflow-wrap: break-word;
								color: rgba(52, 49, 79, 1);
								font-size: 12px;
								font-weight: normal;
								text-align: left;
								white-space: nowrap;
								line-height: 16px;
								margin: 6px 155px 0 0;
							}
						}
					}

					.image-text_158 {
						position: absolute;
						left: 0;
						top: 0;
						width: 237px;
						height: 60px;

						.thumbnail_108 {
							width: 16px;
							height: 16px;
							margin-bottom: 44px;
						}

						.text-group_107 {
							.text_228 {
								overflow-wrap: break-word;
								color: rgba(52, 49, 79, 1);
								font-size: 12px;
								font-weight: normal;
								text-align: left;
								white-space: nowrap;
								line-height: 16px;
							}

							.text_229 {
								overflow-wrap: break-word;
								color: rgba(52, 49, 79, 1);
								font-size: 12px;
								font-weight: normal;
								text-align: left;
								white-space: nowrap;
								line-height: 16px;
								margin: 6px 68px 0 0;
							}

							.text_230 {
								overflow-wrap: break-word;
								color: rgba(52, 49, 79, 1);
								font-size: 12px;
								font-weight: normal;
								text-align: left;
								white-space: nowrap;
								line-height: 16px;
								margin: 6px 155px 0 0;
							}
						}
					}

					.image-text_159 {
						position: absolute;
						left: 0;
						top: 0;
						width: 237px;
						height: 60px;

						.thumbnail_109 {
							width: 16px;
							height: 16px;
							margin: 22px 0 22px 0;
						}

						.text-group_108 {
							.text_228 {
								overflow-wrap: break-word;
								color: rgba(52, 49, 79, 1);
								font-size: 12px;
								font-weight: normal;
								text-align: left;
								white-space: nowrap;
								line-height: 16px;
							}

							.text_229 {
								overflow-wrap: break-word;
								color: rgba(52, 49, 79, 1);
								font-size: 12px;
								font-weight: normal;
								text-align: left;
								white-space: nowrap;
								line-height: 16px;
								margin: 6px 68px 0 0;
							}

							.text_230 {
								overflow-wrap: break-word;
								color: rgba(52, 49, 79, 1);
								font-size: 12px;
								font-weight: normal;
								text-align: left;
								white-space: nowrap;
								line-height: 16px;
								margin: 6px 155px 0 0;
							}
						}
					}
				}

				.block_25 {
					background-color: rgba(52, 49, 79, 0.08);
					width: 342px;
					height: 1px;
					margin-top: 8px;
				}

				.block_26 {
					margin: 12px 12px 0 0;

					.image_46 {
						width: 24px;
						height: 24px;
						margin: 3px 0 3px 0;
					}

					.text_231 {
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 12px;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 16px;
						margin: 7px 0 0 6px;
					}

					.text-wrapper_117 {
						width: 84px;
						height: 30px;
						background: linear-gradient(173deg, #FFA5F5 0%, #319EFF 100%);
						border-radius: 20px;
						text-align: center;

						.text_232 {
							overflow-wrap: break-word;
							color: rgba(255, 255, 255, 1);
							font-size: 13px;
							font-family: PingFangSC-Medium;
							font-weight: 500;
							text-align: center;
							white-space: nowrap;
							line-height: 30px;
						}
					}
				}

				.text_233 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 12px;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 16px;
					margin: 9px 222px 0 0;
				}
			}

			.group_43 {
				margin: 0 162px 0 72px;

				.thumbnail_51 {
					width: 16px;
					height: 16px;
				}

				.text_86 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 12px;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 16px;
					margin-left: 4px;
				}

				.thumbnail_52 {
					width: 16px;
					height: 16px;
					margin-left: 12px;
				}

				.text_87 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 12px;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 16px;
					margin-left: 4px;
				}
			}

			.group_44 {
				position: relative;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin: 12px 0 0 0;
				padding-left: 68px;
				gap: 6px;

				.text-wrapper_46 {
					height: 20px;
					padding: 0 8px;
					background-color: rgba(52, 49, 79, 0.06);
					border-radius: 14px;

					.text_88 {
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 12px;
						font-weight: normal;
						text-align: center;
						white-space: nowrap;
						line-height: 20px;
					}
				}

				.text-wrapper_47 {
					background-color: rgba(52, 49, 79, 0.06);
					border-radius: 14px;
					position: absolute;
					left: 46px;
					top: 0;
					padding: 2px 8px 2px 8px;

					.text_89 {
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 12px;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 16px;
					}
				}

				.text-wrapper_48 {
					background-color: rgba(52, 49, 79, 0.06);
					border-radius: 14px;
					margin-left: 6px;
					padding: 2px 8px 2px 8px;

					.text_90 {
						width: 36px;
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 12px;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 16px;
					}
				}

				.text-wrapper_49 {
					background-color: rgba(52, 49, 79, 0.06);
					border-radius: 14px;
					margin-left: 6px;
					padding: 2px 8px 2px 8px;

					.text_91 {
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 12px;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 16px;
					}
				}
			}
		}

		.test-container {
			position: fixed;
			top: 80vh;
			right: 0;
			width: 134px;
			height: 64px;
			background: url(https://hxs.dsjhs.com:553/prod-api/profile/mbti-btn.png) no-repeat center;
			background-size: 100% 100%;
		}
	}
}

.image-wrapper_12 {
	padding: 0 80px 9px 80px;

	.image_30 {
		width: 230px;
		height: 5px;
	}
}

.tab-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	margin-right: 27px;

}

.tabbar {
	position: fixed;
	bottom: 40rpx;
	left: 0;
	width: 100%;
	z-index: 9999;

	.tabbar-box {
		padding: 10rpx 0 30rpx 0;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 30rpx;

		.center-img {
			margin-top: -70rpx;
			border: 3px solid #fff;
			border-radius: 50%;
		}
	}
}

.active-tab {
	font-weight: bold;

	.text-wrapper_4 {
		background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPng35a3e4cfdf38065af129e4fa0bc88a7b3ce52afcad872ec8a0cbefe6ae9f0806) 100% no-repeat;
		background-size: 100% 100%;
	}

	.image-text_37 {

		.text-group_2 {
			background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPng35a3e4cfdf38065af129e4fa0bc88a7b3ce52afcad872ec8a0cbefe6ae9f0806) 100% no-repeat;
			background-size: 100% 100%;
		}

	}

	.text_7 {
		color: rgba(52, 49, 79, 1) !important;
	}
}
</style>